﻿@{
    ViewBag.Title = "Drag and Drop";
}

<h2>Drag and Drop Testbed</h2>
<p>Based on <a href="https://yuilibrary.com/yui/docs/dd/groups-drag.html">YUI Library example</a></p>

<form class="well">
    <div style="position: relative; height: 300px;">
        <div class="slot" id="t1">1</div>
        <div class="slot" id="t2">2</div>
        <div class="slot" id="b1">3</div>
        <div class="slot" id="b2">4</div>
        <div class="slot" id="b3">5</div>
        <div class="slot" id="b4">6</div>

        <div class="player" id="pt1">1</div>
        <div class="player" id="pt2">2</div>
        <div class="player" id="pb1">3</div>
        <div class="player" id="pb2">4</div>
        <div class="player" id="pboth1">5</div>
        <div class="player" id="pboth2">6</div>
    </div>
</form>

<script type="text/javascript" src="/scripts/yui/yuiloader-min.js"></script>
<script type="text/javascript" src="/scripts/yui/dom-min.js"></script>
<script type="text/javascript" src="/scripts/yui/event-min.js"></script>
<script type="text/javascript" src="/scripts/yui/dragdrop-min.js"></script>
<script type="text/javascript" src="/scripts/yui/element-min.js"></script>
<script type="text/javascript" src="/scripts/yui/button-min.js"></script>

<script type="text/javascript">

    (function () {

        YAHOO.example.DDPlayer = function (id, sGroup, config) {
            YAHOO.example.DDPlayer.superclass.constructor.apply(this, arguments);
            this.initPlayer(id, sGroup, config);
        };

        YAHOO.extend(YAHOO.example.DDPlayer, YAHOO.util.DDProxy, {

            TYPE: "DDPlayer",

            initPlayer: function (id, sGroup, config) {
                if (!id) {
                    return;
                }

                var el = this.getDragEl()
                YAHOO.util.Dom.setStyle(el, "borderColor", "transparent");
                YAHOO.util.Dom.setStyle(el, "opacity", 0.76);

                // specify that this is not currently a drop target
                this.isTarget = false;

                this.originalStyles = [];

                this.type = YAHOO.example.DDPlayer.TYPE;
                this.slot = null;

                this.startPos = YAHOO.util.Dom.getXY(this.getEl());
                YAHOO.log(id + " startpos: " + this.startPos, "info", "example");
            },

            startDrag: function (x, y) {
                YAHOO.log(this.id + " startDrag", "info", "example");
                var Dom = YAHOO.util.Dom;

                var dragEl = this.getDragEl();
                var clickEl = this.getEl();

                dragEl.innerHTML = clickEl.innerHTML;
                dragEl.className = clickEl.className;

                Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
                Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));

                Dom.setStyle(clickEl, "opacity", 0.1);

                var targets = YAHOO.util.DDM.getRelated(this, true);
                YAHOO.log(targets.length + " targets", "info", "example");
                for (var i = 0; i < targets.length; i++) {

                    var targetEl = this.getTargetDomRef(targets[i]);

                    if (!this.originalStyles[targetEl.id]) {
                        this.originalStyles[targetEl.id] = targetEl.className;
                    }

                    targetEl.className = "target";
                }
            },

            getTargetDomRef: function (oDD) {
                if (oDD.player) {
                    return oDD.player.getEl();
                } else {
                    return oDD.getEl();
                }
            },

            endDrag: function (e) {
                // reset the linked element styles
                YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 1);

                this.resetTargets();
            },

            resetTargets: function () {

                // reset the target styles
                var targets = YAHOO.util.DDM.getRelated(this, true);
                for (var i = 0; i < targets.length; i++) {
                    var targetEl = this.getTargetDomRef(targets[i]);
                    var oldStyle = this.originalStyles[targetEl.id];
                    if (oldStyle) {
                        targetEl.className = oldStyle;
                    }
                }
            },

            onDragDrop: function (e, id) {
                // get the drag and drop object that was targeted
                var oDD;

                if ("string" == typeof id) {
                    oDD = YAHOO.util.DDM.getDDById(id);
                } else {
                    oDD = YAHOO.util.DDM.getBestMatch(id);
                }

                var el = this.getEl();

                // check if the slot has a player in it already
                if (oDD.player) {
                    // check if the dragged player was already in a slot
                    if (this.slot) {
                        // check to see if the player that is already in the
                        // slot can go to the slot the dragged player is in
                        // YAHOO.util.DDM.isLegalTarget is a new method
                        if (YAHOO.util.DDM.isLegalTarget(oDD.player, this.slot)) {
                            YAHOO.log("swapping player positions", "info", "example");
                            YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
                            this.slot.player = oDD.player;
                            oDD.player.slot = this.slot;
                        } else {
                            YAHOO.log("moving player in slot back to start", "info", "example");
                            YAHOO.util.Dom.setXY(oDD.player.getEl(), oDD.player.startPos);
                            this.slot.player = null;
                            oDD.player.slot = null
                        }
                    } else {
                        // the player in the slot will be moved to the dragged
                        // players start position
                        oDD.player.slot = null;
                        YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
                    }
                } else {
                    // Move the player into the emply slot
                    // I may be moving off a slot so I need to clear the player ref
                    if (this.slot) {
                        this.slot.player = null;
                    }
                }

                YAHOO.util.DDM.moveToEl(el, oDD.getEl());
                this.resetTargets();

                this.slot = oDD;
                this.slot.player = this;
            },

            swap: function (el1, el2) {
                var Dom = YAHOO.util.Dom;
                var pos1 = Dom.getXY(el1);
                var pos2 = Dom.getXY(el2);
                Dom.setXY(el1, pos2);
                Dom.setXY(el2, pos1);
            },

            onDragOver: function (e, id) {
            },

            onDrag: function (e, id) {
            }

        });

        var slots = [], players = [], Event = YAHOO.util.Event, DDM = YAHOO.util.DDM;

        Event.onDOMReady(function () {
            // slots
            slots[0] = new YAHOO.util.DDTarget("t1", "topslots");
            slots[1] = new YAHOO.util.DDTarget("t2", "topslots");
            slots[2] = new YAHOO.util.DDTarget("b1", "bottomslots");
            slots[3] = new YAHOO.util.DDTarget("b2", "bottomslots");
            slots[4] = new YAHOO.util.DDTarget("b3", "bottomslots");
            slots[5] = new YAHOO.util.DDTarget("b4", "bottomslots");

            // players
            players[0] = new YAHOO.example.DDPlayer("pt1", "topslots");
            players[1] = new YAHOO.example.DDPlayer("pt2", "topslots");
            players[2] = new YAHOO.example.DDPlayer("pb1", "bottomslots");
            players[3] = new YAHOO.example.DDPlayer("pb2", "bottomslots");
            players[4] = new YAHOO.example.DDPlayer("pboth1", "topslots");
            players[4].addToGroup("bottomslots");
            players[5] = new YAHOO.example.DDPlayer("pboth2", "topslots");
            players[5].addToGroup("bottomslots");

            DDM.mode = document.getElementById("ddmode").selectedIndex;

            Event.on("ddmode", "change", function (e) {
                YAHOO.util.DDM.mode = this.selectedIndex;
            });
        });

    })();
</script>

<style type="text/css">
    .slot {
        border: 2px solid #aaaaaa;
        background-color: #dddddd;
        color: #666666;
        text-align: center;
        position: absolute;
        width: 60px;
        height: 60px;
    }

    .player {
        border: 2px solid #bbbbbb;
        color: #eeeeee;
        text-align: center;
        position: absolute;
        width: 60px;
        height: 60px;
    }

    .target {
        border: 2px solid #574188;
        background-color: #cccccc;
        text-align: center;
        position: absolute;
        width: 60px;
        height: 60px;
    }

    #t1 {
        left: 10px;
        top: 0px;
    }

    #t2 {
        left: 378px;
        top: 0px;
    }

    #b1 {
        left: 84px;
        top: 50px;
    }

    #b2 {
        left: 158px;
        top: 50px;
    }

    #b3 {
        left: 232px;
        top: 50px;
    }

    #b4 {
        left: 306px;
        top: 50px;
    }

    #pt1 {
        background-color: #7E695E;
        left: 84px;
        top: 150px;
    }

    #pt2 {
        background-color: #7E695E;
        left: 84px;
        top: 230px;
    }

    #pb1 {
        background-color: #416153;
        left: 195px;
        top: 150px;
    }

    #pb2 {
        background-color: #416153;
        left: 195px;
        top: 230px;
    }

    #pboth1 {
        background-color: #552E37;
        left: 306px;
        top: 150px;
    }

    #pboth2 {
        background-color: #552E37;
        left: 306px;
        top: 230px;
    }

    #usercontrols {
        top: -36px;
    }

    #workarea {
        position: relative;
        height: 300px;
    }
</style>